import React,{useState,useEffect} from 'react'
import { Table, Pagination } from 'antd';
import axios from '../utool/axios'

export default function Comment() {
    const columns=[
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '公厕名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '管理单位',
            dataIndex: 'unit',
            key: 'unit',
        },
        {
            title: '地址',
            dataIndex: 'addr',
            key: 'addr',
        },
        {
            title: '评价意见',
            dataIndex: 'opinion',
            key: 'opinion',
        },
        {
            title: '评价人',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '来源',
            dataIndex: 'source',
            key: 'source',
        },
        {
            title: '评价时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            key: 'operate',
            render: (_, record, index) => (
                <div>
                    <button type='primary' className='td-btn' onClick={() => {
                        del(record, index)
                    }}>删除</button>
                    <span style={{margin: '0 5px',color:'#298EF6'}}>|</span>
                    <button type='primary' className='td-btn' onClick={() => {
                        showMore(record, index)
                    }}>查看</button>
                </div>
            )
        },
    ]

    const del=(record, index)=>{
        console.log(record, index);
    }

    const showMore=(record, index)=>{
        console.log(record, index);
    }

    const onChange = (a, b) => {
        console.log(a, b)
    }

    const [pagesize,setPagesize]=useState(2)

    const [data,setData]=useState([])

    const [leng,setLeng]=useState(0)

    const getdata=async(page=1,pagesize=2)=>{
        await axios.get(`/yym/getOpinionInfo?page=${page}&pageSize=${pagesize}`).then(res=>{
            setData(res.data.data)
            setLeng(res.data.len)
        })
    }

    useEffect(()=>{
        getdata()
    },[])
    return (
        <div>
            {/* 标题 */}
            <div className='title'>
                公厕评价记录
            </div>

            {/* 搜索 */}
            <div className='search'>
                <div className='inp'>
                    <div className='block1'>
                        <div className='spa'>公厕名称</div>
                        <div>
                            <input type="text" className='input' placeholder='请输入公厕名称' />
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>管理单位</div>
                        <div>
                            <select name="" id="" className='input'>
                                <option value="">南岸区城管局</option>
                            </select>
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>评价人</div>
                        <div>
                            <input type="text" className='input' placeholder='请输入公厕名称' />
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>状态</div>
                        <div>
                            <select name="" id="" className='input'>
                                <option value="">正常启用</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div className='btn'>
                    <button className='butt1'>查询</button>
                    <button className='butt2'>重置</button>
                </div>
            </div>

            {/* 表格 */}
            <div className='table-card'>
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    rowSelection={{ type: 'checkbox', onChange: onChange }}
                />

                <div className='pages'>
                    <div>
                        共 <span>{leng}</span> 条
                    </div>

                    <div style={{ marginLeft: '10px' }}>
                        每页
                        <select name="" id="sel" onChange={(e) => {
                            setPagesize(e.target.value)
                            getdata(1, e.target.value)
                        }}>
                            <option value="2">2</option>
                            <option value="4">4</option>
                            <option value="6">6</option>
                            <option value="8">8</option>
                        </select>
                        条
                    </div>

                    <Pagination
                        total={leng}
                        // showTotal={(total) => `共 ${total} 条`}
                        defaultPageSize={pagesize}
                        pageSize={pagesize}
                        defaultCurrent={1}
                        onChange={(page,pagesize)=>{
                            getdata(page,Number(pagesize))
                        }}
                    />
                </div>
            </div>
        </div>
    )
}
